<script setup>
import { ref, watch, computed } from "vue";
import defaultSetting from "@/common/utils/defaultSetting";
import request from "../../common/utils/request";
import _ from "lodash";
import utils from "../../common/utils/utils";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  account: {
    //回显的账号信息
    type: Array,
    default: () => [],
  },
  group_id: {
    //回显分组信息
    type: String,
    default: "",
  },
});

const emit = defineEmits(["onClose", "handleOk"]);
const current_group_id = ref();
const { result: group_account_List } = await request.get(
  "/work_ai",
  "/org/platform/account/group/list",
  { isShotStack: 1 }
);
const router = useRouter();
const selected = ref([]);

const tabChange = (key) => {
  current_group_id.value = key;
};

const handleCancel = () => {
  emit("onClose");
};

const confirmChoose = () => {
  if (!selected.value.length) return message.warning("请选择账号");
  emit("handleOk", selected.value);
};

const allCheckedChange = () => {
  const checkedAll = isCheckedAll();

  if (checkedAll) {
    selected.value = selected.value.filter(
      (tab) => !_.find(tab_under_list.value, { id: tab.id })
    );
  } else {
    selected.value = selected.value
      .filter((tab) => !_.find(tab_under_list.value, { id: tab.id }))
      .concat(tab_under_list.value);
  }
};

const isCheckedAll = () => {
  return tab_under_list.value.filter((tab) =>
    _.find(selected.value, { id: tab.id })
  ).length == tab_under_list.value.length
    ? true
    : false;
};

const isChecked = (id) => {
  return _.find(selected.value, { id }) ? true : false;
};

const checkedChange = (id) => {
  let tab = _.find(selected.value, { id });

  if (tab) {
    selected.value = selected.value.filter((tab) => tab.id != id);
  } else {
    selected.value.push(_.find(tab_under_list.value, { id: id }));
  }
};

const activeGroup = computed(() => {
  return current_group_id.value
    ? _.find(group_account_List, { key: current_group_id.value })
    : null;
});

const tab_under_list = computed(() => {
  return activeGroup.value?.sub || [];
});

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      current_group_id.value =
        props.group_id || _.first(group_account_List)?.key;
      selected.value = _.cloneDeep(props.account);
    } else {
      current_group_id.value = null;
    }
  },
  { immediate: true }
);

const route = useRoute();
const openPage = () => {
  const isElectronEnv = import.meta.env.ELECTRON;
  let url = `${
    utils.isEnv() ? "http://localhost:4022" : defaultSetting.requestDomain
  }`;
  let link = "";
  if (route.path.includes("workShotstack")) {
    link = url + `/#/workShotstack/matrixMarketing/ipManage`;
    if (isElectronEnv) {
      router.push({ name: "IpManage" });
    } else {
      window.open(link);
    }
  } else if (route.path.includes("socialMedia")) {
    link = url + `/#/socialMedia/matrixManage/accountManage`;
    if (isElectronEnv) {
      router.push({ name: "AccountManage" });
    } else {
      window.open(link);
    }
  }
};
</script>

<template>
  <a-modal
    :visible="visible"
    title="选择账号"
    centered
    @cancel="handleCancel"
    @ok="confirmChoose"
    :width="600"
    :body-style="{
      padding: '16px',
      minHeight: '500px',
    }"
  >
    <div class="list-wrapper">
      <div class="list-left">
        <div
          class="tab-item"
          :class="{ 'tab-active': tab.key == current_group_id }"
          @click="tabChange(tab.key)"
          v-for="tab in group_account_List"
          :key="tab.key"
        >
          <img :src="tab.image" class="tab-img" alt="" />
          <span>{{ tab.value }}</span>
        </div>
      </div>
      <div class="account-list hide-scroller-bar" v-if="tab_under_list.length">
        <div class="accout-item all-checked">
          <a-checkbox @change="allCheckedChange" :checked="isCheckedAll()"
            >全选</a-checkbox
          >
        </div>
        <div class="accout-item" v-for="item in tab_under_list" :key="item.id">
          <label
            class="account-lable-item"
            :for="'account-checkbox-' + item.id"
          >
            <a-checkbox
              :id="'account-checkbox-' + item.id"
              :checked="isChecked(item.id)"
              @change="checkedChange(item.id)"
            >
            </a-checkbox>
            <img :src="item.avatar" class="account-avatar" />
            <a-space size="small">
              <span>{{ item.nickname }}</span>
                <a-tooltip>
                <template #title>机构主号：{{ item?.user_expand_info?.parent_account?.nickname }}</template>
                <a-tag color="blue" style="cursor: pointer;"
                  v-if="item?.user_expand_info?.account_type == 'org_sub' && item?.user_expand_info?.account_type_txt">{{
                    item?.user_expand_info?.account_type_txt }}</a-tag>
              </a-tooltip>
              <a-tag color="purple"
                v-if="item?.user_expand_info?.account_type == 'org_main' && item?.user_expand_info?.account_type_txt">{{
                  item?.user_expand_info?.account_type_txt }}</a-tag>
              <a-tag
                v-if="item?.user_expand_info?.account_type == 'default' && item?.user_expand_info?.account_type_txt">{{
                  item?.user_expand_info?.account_type_txt }}</a-tag>
            </a-space>
          </label>
        </div>
      </div>
      <div v-else class="account-list-empty">
        <a-empty>
          <template #description>
            <span>暂无账号</span>
            <span
              style="
                color: var(--ss-primary-color);
                cursor: pointer;
                margin-left: 5px;
              "
              @click="openPage"
              >点击创建</span
            >
          </template>
        </a-empty>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.list-wrapper {
  display: flex;

  height: 450px;
}
.list-left {
  flex-shrink: 0;
  width: 199px;
  border-right: 1px solid #e5e5e5;
}
.tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;

  cursor: pointer;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  padding: 0 10px;
  height: 50px;
}
.tab-active {
  background-color: #e7e5f3;
}
.tab-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  margin-right: 10px;
}
.active-account {
  border: 1px solid red;
}
.accout-item {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #eee;
}
.account-lable-item {
  width: 100%;
  cursor: pointer;
}
.account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 5px;
  object-fit: contain;
}
.choose-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.choose-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 5px;
}
.choose-item:hover .choose-item-close {
  visibility: visible !important;
}
.account-avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
}
.choose-item-close {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  visibility: hidden;
}
.left-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
  padding: 10px 0;

  cursor: pointer;
  .choose-item-close {
    position: absolute;
    right: 15px;
    top: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    visibility: hidden;
  }

  &:hover .choose-item-close {
    visibility: visible !important;
  }
  &:hover .choose-item-close {
    visibility: visible !important;
  }
}
.active_memory_tab:hover .choose-item-close {
  background-color: #e7e5f3;
}
.active_memory_tab {
  background-color: #e7e5f3 !important;
}
.left-item-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.account-list {
  height: 450px;
  width: calc(100% - 200px);
  width: 100%;
  overflow-y: auto;
  margin-left: 20px;
}
.account-list-empty {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-wrapper {
  display: flex;

  height: 450px;
}
.list-left {
  flex-shrink: 0;
  width: 199px;
  border-right: 1px solid #e5e5e5;
}
.tab-item {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 45px;

  cursor: pointer;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  padding: 0 10px;
  height: 50px;
}
.tab-active {
  background-color: #e7e5f3;
}
.tab-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  margin-right: 10px;
}
.active-account {
  border: 1px solid red;
}
.all-checked {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 100;
}
</style>
